import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';
import {NavLink} from 'react-router-dom';
import {Switch, Route} from 'react-router-dom';
import './App.css';
import './static/css/common.sass';

//组件
import Home from './routes/Home'
import ProjectManager from './routes/ProjectManager'

const { Header, Sider, Content } = Layout;

class App extends Component {

    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

    render() {
        return (
            <Layout style={{height: '100%'}}>
                <Sider
                    trigger={null}
                    collapsible
                    collapsed={this.state.collapsed}>
                    <div className="logo">Api Define</div>
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <Menu.Item key="1">
                            <NavLink to="/admin/home">
                                <Icon type="dashboard" theme="outlined"/>
                                <span>首页</span>
                            </NavLink>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <NavLink to="/admin/projectManager">
                                <Icon type="project" theme="outlined"/>
                                <span>项目管理</span>
                            </NavLink>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <NavLink to="/databaseManager" target="_blank">
                                <Icon type="database" theme="outlined"/>
                                <span>数据库管理</span>
                            </NavLink>
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout>
                    <Header style={{background: '#fff', padding: 0}}>
                        <Icon
                            className="trigger"
                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={this.toggle}
                        />
                    </Header>
                    <Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}>

                        {/* 路由器 */}
                        <Switch>
                            <Route path='/' exact component={Home}/>
                            <Route path='/admin/home' component={Home}/>
                            <Route path='/admin/projectManager' component={ProjectManager} />

                        </Switch>

                    </Content>
                </Layout>
            </Layout>
        );
    }
}

export default App;
